import React from 'react'

//引入connect高阶组件，可以引用到provider上store中的数据
//两个参数都为函数，
//其中第一个函数的参数为state，可以用来建立组件与仓库数据state的关系（组件通过props访问与绑定）
//第二个函数的参数为dispatch，可在该函数中返回一个对象集合（内部对象有type和payload属性），用来dispatch回reducer，触发action以改变state内的数据
import { connect } from 'react-redux'

class App extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.handleAdd}>+</button>
        <span>{this.props.num}</span>
        <button onClick={this.props.handleSub}>-</button>
      </div>
    )
  }
}

//connect(mapStateToProps,mapDispatchToProps)(App)
export default connect(
  (state)=>{
    console.log(state)
    return {
      num: state.num
    }
  },
  (dispatch)=>{
    return {
      handleAdd: ()=> {
        let addAction = {
          type: 'ADD',
          payload: {
            number: 1
          }
        }
        dispatch(addAction)
      },
      handleSub: ()=> {
        let subAction = {
          type: 'SUB',
          payload: {
            number: 1
          }
        }
        dispatch(subAction)
      }
    }
  }
)(App)